<style lang="less">
    @import './tag-selector.less';
</style>

<template>
    <Modal v-model="vshow"  width="800px" @on-visible-change="onHide">
		<Spin fix v-if="spinShow">
			<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			<div>Loading</div>
		</Spin>
		<div slot="header">
			<span class="group-header">选择标签</span>
			
		</div>
        <Row v-show="!spinShow" type="flex" :gutter="16">
			<Col :span="4" v-for="(item,index) in tagList" :key="index">
				<Tag type="border" closable color="success" @click.native="insertTag(item.value)">{{item.value}}</Tag>
				<div class="cleaner10"></div>
			</Col>
        </Row>
    </Modal>
</template>

<script>
import { Row, Col, Modal, Spin, Tag } from 'iview';

import {mapState,mapGetters} from 'vuex'
export default {
    name: 'TagSelector',
    components: {
        Row, Col, Modal, Spin, Tag
    },
    props: {
        show: {
            type: Boolean
        }
    },
    data(){
        return {
            spinShow:true,
			tagList:{page:0,pageSize:18},
			selectedTag:[]
        }
    },
	methods:{
        init:function(){
            let self=this
            self.spinShow=true

            function action1(){return self.$http.get("/v1/welisten/listeners/tags",{params: { 'token': self.token }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code)
				{
					self.tagList=response1.data.data

				}else{self.$Message.error(response1.data.message)}

				self.spinShow=false


			})).catch(self.$http.spread(function (error1) { 
				self.$Message.error(error1)
				self.spinShow=false
			}))


			
        },
        insertTag:function(val){
			this.selectedTag.push(val)
            this.$emit("on-change",val)
		},
        onHide:function(val){
            if (!val){
                this.$emit("on-hide",false)
            }
        },
    },
    mounted(){
        this.init()
    },
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuIndex']),
		vshow:{
            get () {
                return this.show
            },
            set (val) {
                this.show=val
            }
		}
	}
};
</script>

